@layout("/common/_container.html",{css:["/assets/expand/module/limarquee/css/liMarquee.css"],js:["/assets/modular/recy/orderForm/orderForm.js"]}){
<style>
    .site-doc-color{
        padding:20px;
    }
    .site-doc-color li{
        width:200px;
        height:70px;
        text-align:center;
        color:white;
        float:left;
        margin-right:20px;
        margin-top:10px;
    }
    .site-doc-color li p{
        line-height: 2;
    }
    body {
        /*background-color: black;*/
        /*background:url(${ctxPath}/assets/common/images/stars.jpg) no-repeat;*/
    }
    .rankings_table{
        width:100%;margin:0 auto;border-spacing:5px;border-collapse: separate;
    }
    .rankings_table td{
        border-bottom: 1px dotted white;
        padding:5px;
        line-height:2;
    }
    .rankings_table th{
        background-color: #353942;
        padding:5px;
        line-height:2;
    }
    .data-item{
        padding-top:10px;
        margin-left:50px;
    }
    .data-item .title{
        background:url(${ctxPath}/assets/common/images/title_bg.png) no-repeat;
        height:26px;
        color:white;
        line-height:26px;
        text-align:center;
    }
    .data-item .data{
        color:#fc9c24
    }
    .data-item .data .unit{
        color:white;
    }
    .info_box{
        clear:both;
        background:url(${ctxPath}/assets/common/images/part4.png) no-repeat;
        width:451px;height:347px;
        padding-top:9px;
        align:right;
        float:right;
    }
    .layui-tab-title .layui-this{
        color:white
    }
    .marqueeContainer.str_wrap{
        background:none;
    }
    .bgimg{
        /*position:fixed;*/
        top: 0;
        left: 0;
        width:100%;
        height:100%;
        min-width: 1000px;
        z-index:-10;
        zoom: 1;
        background-color: #fff;
        background: url(${ctxPath}/assets/common/images/stars.jpg) no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }
</style>
<div class="bgimg">
<div class="" style="">
    <div style="text-align:center;font-size:20px;font-weight:bold;line-height:70px;color:white;height:85px;background:url(${ctxPath}/assets/common/images/title.png) center center repeat-x;">${area}</div>
    <div style="">
    <div class="layui-row" style="width:1350px;margin:0 auto">
        <div class="layui-col-md4" style="">
            <div class="info_box">
                <div style="text-align:center;font-size:16px;font-weight:bold;color:white"> 垃圾回收周趋势图</div>
                <div id="weekTrends" style="padding-left:20px;width: 450px;height:300px;"></div>
            </div>
            <div class="info_box">
                <div style="text-align:center;font-size:16px;font-weight:bold;color:white"> 会员月新增人数趋势图</div>
                <div id="userTrends" style="padding-left:20px;width: 450px;height:300px;"></div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div style="width:900px;margin:0">
                <div style="text-align:center;background:url('${ctxPath}/assets/common/images/part-width3.png') no-repeat;width:900px;height:347px;">
                    <div style="color:white;text-align:center;padding-top:10px">数据</div>
                    <div class="layui-row">
                        <div class="layui-col-md5">
                            <div class="layui-row" style="margin-top:50px;">
                                <div class="layui-col-md6">
                                    <div style="margin-left:70px;margin-top:30px;background-color:#9ea12c;border-radius:50%;width:70px;height:70px;color:white;">
                                        <p style="padding-top:20px"> 会员数量</p><p>
                                    </p><p tips="">${userTotal}人</p>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div style="background-color:#b26c27;border-radius:50%;width:90px;height:90px;color:white;">
                                        <p style="padding-top:30px">今日新增</p><p>
                                    </p><p tips="">${todayUserTotal}人</p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <div style="background-color:#08929c;border-radius:50%;width:70px;height:70px;color:white;margin-top:20px;margin-left:80px;">
                                        <p style="padding-top:20px">回收订单</p><p>
                                    </p><p tips="">${allOrderCount}</p>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <div style="background-color:#0b7fb2;border-radius:50%;width:70px;height:70px;color:white;margin-top:50px;">
                                                <p style="padding-top:20px">积分兑换</p><p>
                                            </p><p tips="">${todayProductExchangeTotal}次</p>
                                            </div>
                                        </div>
                                        <div class="layui-col-md6">
                                            <div style="background-color:#638b33;border-radius:50%;width:70px;height:70px;color:white;">
                                                <p style="padding-top:20px">积分兑换</p><p>
                                            </p><p tips="">${todayProductExchangeTotal}次</p>
                                            </div>
                                        </div>
                                    </div>



                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md2">
                            <div>
                                <div style="background:url(${ctxPath}/assets/common/images/data.png) no-repeat;width:77px;height:88px;margin:0 auto;margin-top:100px">

                                </div>
                                <div style="color:white;text-align:center">
                                    数据
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md5" style="margin-top:50px;">
                            @for(wasteType in wasteTypeNameMap){
                            <div class="data-item">
                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <div class="title">
                                            ${wasteType.value}回收次数
                                        </div>
                                    </div>
                                    <div class="layui-col-md2">
                                        <div class="data">
                                            <span>${wasteTypeCountMap[wasteType.key]["total"]!0}</span>
                                            <span class="unit">次</span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            @}
                        </div>
                    </div>

                </div>
                <div class="layui-row" style="padding-left:10px;padding-top:10px;">
                    <div class="layui-col-md6">
                        <div style="text-align:center;background:url(${ctxPath}/assets/common/images/part4.png);width:451px;height:347px">
                            <div style="font-size:16px;font-weight:bold;color:white;height:32px;line-height:42px;color:white;text-align:center">红榜</div>
                            <div style="text-align:center;margin-top:20px;">
                            <table class="rankings_table" style="width:80%">
                                <thead>
                                <tr style="color:white;line-height:2">
                                <th style="background-color: #353942;">用户名</th>
                                <th style="background-color: #353942;">积分</th>
                                <th style="background-color: #353942;">地址</th>
                                </tr>
                                </thead>
                                <tbody>
                                @for(user in topUser){
                                <tr>
                                    <td>${user.userName}</td>
                                    <td>${user.withdraw}</td>
                                    <td>${user.remark}</td>
                                </tr>
                                @}elsefor{
                                <tr><td colspan="3" style="color:red">今日暂无红榜数据</td></tr>
                                @}
                                </tbody>

                            </table>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div style="text-align:center;background:url(${ctxPath}/assets/common/images/part4.png);width:451px;height:347px">
                            <div style="font-size:16px;font-weight:bold;color:white;height:32px;line-height:42px;color:white;text-align:center">黑榜</div>
                            <div style="text-align:center;margin-top:20px;">
                                <table class="rankings_table" style="width:80%">
                                    <thead>
                                        <tr style="color:white;line-height:2">
                                            <th style="background-color: #353942;">用户名</th>
                                            <th style="background-color: #353942;">积分</th>
                                            <th style="background-color: #353942;">地址</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @for(user in bottomUser){
                                    <tr>
                                        <td>${user.userName}</td>
                                        <td>${user.withdraw}</td>
                                        <td>${user.remark}</td>
                                    </tr>
                                    @}elsefor{
                                    <tr><td colspan="3" style="color:red">今日暂无黑榜数据</td></tr>
                                    @}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <!--<ul class="site-doc-color">
        <li style="background-color: #FF5722;">
            <p> 会员数量</p><p>
        </p><p tips="">${userTotal}人</p>
        </li>
        <li style="background-color: #FF5722;">
            <p>今日新增会员</p><p>
        </p><p tips="">${todayUserTotal}人</p>
        </li>


        <li style="background-color: #FF5722;">
            <p>回收订单总数</p><p>
        </p><p tips="">${allOrderCount}</p>
        </li>
        <li style="background-color: #FF5722;">
            <p>积分兑换总数</p><p>
        </p><p tips="">${todayProductExchangeTotal}次</p>
        </li>
    </ul>
    <div style="clear: both"></div>
    <ul class="site-doc-color">
        @for(wasteType in wasteTypeNameMap){
        <li style="background-color: #01AAED;">
            <p>${wasteType.value}回收次数</p><p>
        </p><p tips="">${wasteTypeCountMap[wasteType.key]["total"]!0}次</p>
        </li>
        @}

    </ul>-->
</div>
<!--<div class="layui-row">
    <div class="layui-col-md6">
        <div style="clear:both;border-top: 2px solid red">
            <div style="text-align:center;font-size:18px;font-weight:bold"> 垃圾回收周趋势图</div>
            <div id="weekTrends" style="width: 451px;height:400px;"></div>
        </div>

    </div>
    <div class="layui-col-md6">
        <div style="clear:both;border-top: 2px solid red">
            <div id="monthTrends" style="width: 451px;height:400px;"></div>
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md6">
       <div style="clear:both;border-top: 2px solid red">
            <div id="userTrends" style="width: 600px;height:400px;"></div>
        </div>

    </div>

</div>-->
<div style="width:1350px;margin:0 auto;border-bottom:2px solid red;color:white">
<div style="font-size:18px;font-weight:bold">各类垃圾实时回收数据：</div>
<div class="layui-tab">
    <ul class="layui-tab-title">
        @var hasShow = false;
        @for(wasteTypeName in wasteTypeNameMap){
            @var orderSize = resentOrderMap[wasteTypeName.value].~size!0;
            <li ${!hasShow && orderSize>0?"class='layui-this'":""}>${wasteTypeNameLP.index}.${wasteTypeName.value}</li>
            @if(!hasShow) {hasShow = !hasShow && orderSize>0;}
        @}
    </ul>
    <div class="layui-tab-content">
       <!-- <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>-->
        @hasShow = false;
        @for(wasteTypeName in wasteTypeNameMap){
            @var orderSize = resentOrderMap[wasteTypeName.value].~size!0;
        <div class="layui-tab-item ${!hasShow && orderSize>0?'layui-show':''}">
            @if(!hasShow) {hasShow = !hasShow && orderSize>0;}
            @if(orderSize==0){
            <div style="height:300px;">
                暂无回收记录
            </div>
            @}else{
            <div class="marquee-container">
                <div class="marqueeContainer" style="height:300px;">
            <table class="rankings_table" style="margin:0">
                <thead>
                    <th>用户名</th>
                    <th>垃圾类别</th>
                    <th>垃圾重量</th>
                    <th>积分</th>
                    <th>回收时间</th>
                </thead>
            <tbody>

            @for(order in resentOrderMap[wasteTypeName.value]){
                <tr>
                    <td>${order.userIdModel.userName!""}</td>
                    <td>${wasteTypeName.value}</td>
                    <td>${order.wasteWeight}克</td>
                    <td>${order.price}</td>
                    <td>${order.createTime,'yyyy-MM-dd HH:mm:ss'}</td>
                </tr>
            @}
            </tbody>
            </table>
                </div>
            </div>
            @}
        </div>
        @}
    </div>
</div>
</div>
<!--<div class="layui-row" style="margin-top:20px;">
    <div class="layui-col-md6">
            <div style="clear: both">红榜</div>
            <table class="layui-table" lay-skin="line">
                <thead>
                    <th>用户名</th>
                    <th>积分</th>
                    <th>地址</th>
                </thead>
                <tbody>
                @for(user in topUser){
                <tr>
                    <td>${user.userName}</td>
                    <td>${user.withdraw}</td>
                    <td>${user.remark}</td>
                </tr>
                @}elsefor{
                <tr><td colspan="3" style="color:red">今日暂无红榜数据</td></tr>
                @}
                </tbody>

            </table>
    </div>
    <div class="layui-col-md6">
        <div>黑榜</div>
        <table class="layui-table" lay-skin="line">
            <thead>
            <th>用户名</th>
            <th>积分</th>
            <th>地址</th>
            </thead>
            <tbody>
            @for(user in bottomUser){
            <tr>
                <td>${user.userName}</td>
                <td>${user.withdraw}</td>
                <td>${user.remark}</td>
            </tr>
            @}
            </tbody>
 </table>
    </div>
</div>-->
</div>
@}
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<script>
    layui.use(["jquery","element","liMarquee"],function(){
        var element = layui.element;
        var $ = layui.jquery;
        $(".layui-body-header",window.parent.document).hide();
        $(".layui-body-header.show+div",window.parent.document).offset({top:50});
        $(".layui-footer",window.parent.document).hide();
        var liMarquee = layui.liMarquee;
        $('.marqueeContainer').liMarquee({direction: 'up'});
       var weekChart =  echarts.init(document.getElementById("weekTrends"))
       var weekOption = {
           legend: {
               textStyle:{
                   color:"#fff"
               }
           },
           tooltip: {},
           dataset: {
               source: [
                   ['product'
                   @for(wasteTypeName in wasteTypeNameMap){
                    ,'${wasteTypeName.value}'
                    @}
                   ]
                    @for(var index=0;index<8;index++){
                    ,["${dateStrs[index]}",
                   @for(wasteTypeName in wasteTypeNameMap){
                        ${wasteTypeNameLP.index==1?"":","}
                        @if(isEmpty(tongjiMap7day[dateStrs[index]+"-"+wasteTypeName.value])){
                            0
                        @}else{
                            ${tongjiMap7day[dateStrs[index]+"-"+wasteTypeName.value]}
                        @}
                   @}
                   ]
                    @}
               ]
           },
           xAxis: {type: 'category',axisLine: {
               lineStyle: {
                   color: "#fff",
               }
           }
           },
           yAxis: {axisLine: {
               lineStyle: {
                   color: "#fff",
               }
           }
           },
           // Declare several bar series, each will be mapped
           // to a column of dataset.source by default.
           series: [
           @for(wasteTypeName in wasteTypeNameMap){
                ${wasteTypeNameLP.index==1?"":","}{type: 'bar'}
            @}
           ]
       };
        weekChart.setOption(weekOption);
        /*var monthChart = echarts.init(document.getElementById("monthTrends"));
        var monthOption = {
            title: {
                text: '垃圾回收月趋势图',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: [
                    @for(month in monthMap){
                    ${monthLP.index==1?"":","}'${month["month"]}'
                    @}
                ]
            },
            yAxis: {
                name: '次数',
                type: 'value'
            },
            series: [{
                data: [
                @for(month in monthMap){
                    ${monthLP.index==1?"":","}${month["total"]}
                @}
                ],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };
        monthChart.setOption(monthOption);*/

        var userMonthChart = echarts.init(document.getElementById("userTrends"));
        var userMonthOption = {
            title: {
                /*text: '会员月新增人数趋势图',
                left: 'center',
                textStyle:{
                    color:"#fff",
                    size: "16px"
                }*/
            },
            tooltip: {},
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    },
                    data: [
                    @for(month in userChangeMaps){
                    ${monthLP.index==1?"":","}'${month["month"]}'
                @}
            ]
            },
                yAxis: {
                    type: 'value',
                        axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series: [{
                    data: [
                    @for(month in userChangeMaps){
                    ${monthLP.index==1?"":","}${month["total"]}
                @}
            ],
        type: 'line',
            symbol: 'triangle',
            symbolSize: 20,
            lineStyle: {
                color: 'green',
                    width: 4,
                    type: 'dashed'
            },
            itemStyle: {
                borderWidth: 3,
                    borderColor: 'yellow',
                    color: 'blue'
            }
            }]
        };
        userMonthChart.setOption(userMonthOption);

        })
</script>